let customMessageBoxEl = null;
let customMessageBoxCloseEl = null;
let customMessageBoxBodyEl = null;
let customMessageMainBoxEl = null;
let customMessageTitleBoxEl = null;

function customMessageBoxCreate() {
    customMessageBoxEl = document.createElement('div');
    customMessageBoxEl.className = 'custom-message-box';
    customMessageMainBoxEl = document.createElement('div');
    customMessageMainBoxEl.className = 'custom-message-main';
    customMessageBoxEl.appendChild(customMessageMainBoxEl);
    const headerEl = document.createElement('div');
    headerEl.className = 'custom-message-main-header';
    customMessageTitleBoxEl = document.createElement('div');
    customMessageTitleBoxEl.className = 'custom-message-main-title';
    customMessageBoxCloseEl = document.createElement('div');
    customMessageBoxCloseEl.className = 'custom-message-main-close';
    const leftEl = document.createElement('div');
    leftEl.className = 'custom-message-main-close-left';
    const rightEl = document.createElement('div');
    rightEl.className = 'custom-message-main-close-right';
    customMessageBoxCloseEl.appendChild(leftEl);
    customMessageBoxCloseEl.appendChild(rightEl);
    headerEl.appendChild(customMessageTitleBoxEl);
    headerEl.appendChild(customMessageBoxCloseEl);
    customMessageBoxBodyEl = document.createElement('div');
    customMessageBoxBodyEl.className = 'custom-message-main-body';
    customMessageMainBoxEl.appendChild(headerEl);
    customMessageMainBoxEl.appendChild(customMessageBoxBodyEl);
    return [customMessageBoxEl, customMessageBoxCloseEl, customMessageBoxBodyEl];

}

function customMessageBoxClose(callBackFun) {
    setTimeout(() => {
        callBackFun();
    });
    publicAllowScrolling();
    customMessageBoxEl.style.opacity = '0';
    customMessageMainBoxEl.style.transform = 'translateX(400px)  translateY(200px) scale(.6)';
    setTimeout(() => {
        customMessageBoxEl.style.display = 'none';
    }, 300);

}

// callFunToEvent,对象克隆后，对于有些事件处理，需要根据克隆后的元素进行添加(cloneNode 克隆后，并不会克隆事件)
function customMessageBoxShow(el, title = '自定义界面', callFunToEvent = () => { }) {
    customMessageTitleBoxEl.innerText = title;
    //克隆一份，不修改原对象
    const cloneEl = el.cloneNode(true);
    publicPreventScrolling();
    callFunToEvent(cloneEl);
    // 显示元素前，先清空
    customMessageBoxBodyEl.innerHTML = '';
    customMessageBoxBodyEl.appendChild(cloneEl);

    cloneEl.classList.remove('custom-message-content');

    customMessageBoxEl.style.display = 'flex';
    setTimeout(() => {
        customMessageMainBoxEl.style.transform = 'translateX(0px)  translateY(0px) scale(1)';
        customMessageBoxEl.style.opacity = '1';
    });

}

function customMessageBoxRun(callBackFun = () => { }) {
    customMessageBoxCreate();
    customMessageBoxCloseEl.addEventListener('click', () => customMessageBoxClose(callBackFun));
    document.body.appendChild(customMessageBoxEl);
}